<template>
	<view class="register">
		<!-- <div class="reg-header">
			<text>您好 ,</text>
			<text>请注册您的账号</text>
		</div> -->
		<div class="reg-banner">
			<div class="logo">
				<image src="../../static/style3.webp" mode=""></image>
			</div>
			<div class="reg-list">
				<ul>

					<li>
						<div class="reg-list">
							<text>账号：</text>
							<input type="text" placeholder="请输入您的账号" placeholder-style="color: #9c9c9c"
								v-model="account">
						</div>
					</li>
					<li>
						<div class="reg-list">
							<text>密码：</text>
							<input type="password" placeholder="请输入您的密码" placeholder-style="color: #9c9c9c"
								v-model="password">
						</div>
					</li>
				</ul>
			</div>
			<div class="reg-btn">
				<ul>
					<li @click="addInp()">登录账号</li>
					<li @click="goReg()">去注册</li>
				</ul>
			</div>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				regExp: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
				avatar: '',
				timer: null,
				loginList: []
			}
		},
		onLoad() {

			uniCloud.callFunction({
					name: 'login_user',
					data: {}
				})
				.then(content => {
					console.log(content);
					let {
						result: {
							data
						}
					} = content;
					this.loginList = data
				})
		},
		methods: {
			async addInp() {
				if (this.account.length == 0 || this.password.length == 0) {
					uni.showToast({
						title: '输入框不能空值',
						icon: 'none'
					})
					return
				}
				if (!this.regExp.test(this.account)) {
					uni.showToast({
						title: '账号不是邮箱格式',
						icon: 'none'
					})
					return
				} else {
					for (let i = 0; i < this.loginList.length; i++) {
						if (this.password == this.loginList[i].user_password && this.account == this.loginList[i]
							.user_account) {
							uni.showToast({
								title: '登录成功，即将跳转...',
								icon: 'none'
							})
							let obj = {};
							obj.user_nickName = this.loginList[i].user_nickName;
							obj.user_id = this.loginList[i].user_id;
							obj.user_avatar = this.loginList[i].user_avatar
							obj.user_create_time = this.loginList[i].user_create_time;
							console.log(obj);
							uni.setStorageSync('userInfo', JSON.stringify(obj))
							this.timer = setInterval(() => {
								uni.switchTab({
									url: '../my/my'
								})
							}, 2000)
							console.log(this.password == this.loginList[i].user_password && this.account == this
								.loginList[i].user_account);
						} else if (this.password != this.loginList[i].user_password || this.account != this.loginList[
								i].user_account) {
							uni.showToast({
								title: '用户不存在',
								icon: 'none'
							})
						}
					}
				}
			},
			goReg() {
				uni.navigateTo({
					url: '../register/register'
				})
			}
		}
	}
</script>


<style lang="scss">
	.register {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		height: 1246rpx;
		opacity: 1;
		overflow: hidden;

		.reg-banner {
			width: 90%;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			// align-items: center;
			border-radius: 40rpx;
			margin: 80rpx auto 0;
			border: 1px solid #f5841a;
			height: 88%;
			background-color: #fceccc;

			.logo {
				margin: 0 auto;
				width: 440rpx;
				height: 340rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.reg-list {
				width: 90%;
				margin: 0 auto;

				ul {
					width: 100%;
					list-style: none;
					padding: 0;

					// margin: 0;
					li {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						// padding: 0;
						// padding: 5rpx 10rpx;
						border-bottom: 1px solid #f5841a;
						margin-bottom: 30rpx;
						padding-bottom: 20rpx;

						// box-sizing: border-box;
						.reg-list {
							display: flex;
							align-items: center;

							text {
								margin-right: 10rpx;
							}

							input {
								// line-height: 100rpx;
								font-size: 14px;
								margin-top: 3rpx;
							}
						}
					}
				}
			}

			.reg-btn {
				width: 100%;
				margin-top: 40rpx;

				ul {
					display: flex;
					justify-content: space-evenly;
					list-style: none;
					padding: 0;
					align-items: center;

					li {
						width: 200rpx;
						height: 80rpx;
						font-size: 14px;
						text-align: center;
						line-height: 80rpx;
						color: #fceccc;
						border-radius: 25px;
						background: linear-gradient(90deg, rgba(247, 136, 23, 1) 0%, rgba(232, 111, 45, 1) 100%);
					}
				}
			}
		}
	}
</style>